#app {

	.main-container {
	  min-height: 100%;
	  transition: margin-left .28s;
	  margin-left: $base-sidebar-width;
	  position: relative;
	}
  
	.sidebarHide {
	  margin-left: 0!important;
	}
  
	.sidebar-container {
		background-color: #fff;
	  -webkit-transition: width .28s;
	  transition: width 0.28s;
	  width: calc( $base-sidebar-width - 1.5625rem ) !important;
	  border-radius: 10px;
	//   background-color: $base-menu-background;
	  height: calc( 100% - 3.125rem );
	  position: fixed;
	  font-size: 0px;
	  top: 1.5625rem;
	  bottom: 0;
	  left: 1.5625rem;
	  z-index: 1001;
	  overflow: hidden;
	//   -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
	//   box-shadow: 2px 0 6px rgba(0,21,41,.35);
  
	  // reset element-ui css
	  .horizontal-collapse-transition {
		transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
	  }
  
	  .scrollbar-wrapper {
		overflow-x: hidden !important;
	  }
  
	  .el-scrollbar__bar.is-vertical {
		right: 0px;
	  }
  
	  .el-scrollbar {
		height: 100%;
	  }
  
	  &.has-logo {
		.el-scrollbar {
		  height: calc(100% - 50px);
		}
	  }
  
	  .is-horizontal {
		display: none;
	  }
  
	  a {
		display: inline-block;
		width: calc( 100% - 30px );
		overflow: hidden;
		margin-left: 15px;
		border-radius: 10px;
		// margin: 0 auto;
	  }
	  .is-active.is-opened{
		width: calc( 100% - 26px );
		overflow: hidden;
		//margin-left: 15px;
		margin: 0 auto;
		border-radius: 10px;
	  }
	  a.router-link-active,.is-active.is-opened {
		border: 2px solid #BE1A21;
		background-color: #FFEAE9;
		ul{
			background-color: #FFEAE9;
		}
		.submenu-title-noDropdown{
			color: #BE1A21;
		}
	  }
	  .el-menu--vertical.el-menu--collapse a.router-link-active{
		border: none;
		background-color: transparent;
	  }
	  .el-menu--vertical.el-menu--collapse .el-menu-item .el-menu-tooltip__trigger{
		padding-left: 5px;
	  }
	  
	  .svg-icon {
		margin-right: 16px;
	  }
  
	  .el-menu {
		border: none;
		height: 100%;
		width: 100% !important;
	  }
  
	  .el-menu-item, .menu-title {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	  }
  
	  .el-menu-item .el-menu-tooltip__trigger {
		display: inline-block !important;
	  }
  
	  // menu hover
	  .sub-menu-title-noDropdown,
	  .el-sub-menu__title {
		&:hover {
		  background-color: rgba(0, 0, 0, 0.06) !important;
		}
	  }
  
	  & .theme-dark .is-active > .el-sub-menu__title {
		color: $base-menu-color-active !important;
	  }
	  & .nest-menu .router-link-active{
		border: none;
		background-color: transparent;
		.el-menu-item.is-active{
			color: #BE1A21;
			.menu-title-div{
				color: #999999;
			}
		}
	  }
	  & .nest-menu .el-sub-menu>.el-sub-menu__title,
	  & .el-sub-menu .el-menu-item {
		min-width: $base-sidebar-width2 !important;
  
		// &:hover {
		//   background-color: rgba(0, 0, 0, 0.06) !important;
		// }
	  }
  
	  & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
	  & .theme-dark .el-sub-menu .el-menu-item {
		// background-color: $base-sub-menu-background !important;
		&:hover {
		  // background-color: $base-sub-menu-hover !important;
			.menu-title-span{
				// background:$base-sub-menu-hover !important; 
			}
		}
	  }
	}
  
	.hideSidebar {
		a.sidebar-logo-link{
			margin-left: 2px!important;
			width: 100%!important;
		}
	  .sidebar-container {
		width: 54px !important;
	  }
  
	  .main-container {
		margin-left: calc( 54px + 1.5625rem );
	  }
  
	  .sub-menu-title-noDropdown {
		padding: 0 !important;
		position: relative;
  
		.el-tooltip {
		  padding: 0 !important;
  
		  .svg-icon {
			margin-left: 20px;
		  }
		}
	  }
  
	  .el-sub-menu {
		overflow: hidden;
  
		&>.el-sub-menu__title {
		  padding: 0 !important;
  
		  .svg-icon {
			margin-left: 20px;
		  }
  
		}
	  }
  
	  .el-menu--collapse {
		.el-sub-menu {
		  &>.el-sub-menu__title {
			&>span {
			  height: 0;
			  width: 0;
			  overflow: hidden;
			  visibility: hidden;
			  display: inline-block;
			}
			&>i {
			  height: 0;
			  width: 0;
			  overflow: hidden;
			  visibility: hidden;
			  display: inline-block;
			}
		  }
		}
	  }
	}
  
	.el-menu--collapse .el-menu .el-sub-menu {
	  min-width: $base-sidebar-width !important;
	}
  
	// mobile responsive
	.mobile {
	  .main-container {
		margin-left: 0px;
	  }
  
	  .sidebar-container {
		transition: transform .28s;
		width: calc( $base-sidebar-width - 1.5625rem ) !important;
	  }
  
	  &.hideSidebar {
		.sidebar-container {
		  pointer-events: none;
		  transition-duration: 0.3s;
		  transform: translate3d(-$base-sidebar-width, 0, 0);
		}
	  }
	}
  
	.withoutAnimation {
  
	  .main-container,
	  .sidebar-container {
		transition: none;
	  }
	}
  }
  
  // when menu collapsed
  .el-menu--vertical {
	&>.el-menu {
	  .svg-icon {
		margin-right: 16px;
	  }
	}
  
	.nest-menu .el-sub-menu>.el-sub-menu__title,
	.el-menu-item {
	  &:hover {
		// you can use $sub-menuHover
		// background-color: rgba(0, 0, 0, 0.06) !important;
	  }
	}
  
	// the scroll bar appears when the sub-menu is too long
	>.el-menu--popup {
	  max-height: 100vh;
	  overflow-y: auto;
  
	  &::-webkit-scrollbar-track-piece {
		background: #d3dce6;
	  }
  
	  &::-webkit-scrollbar {
		width: 6px;
	  }
  
	  &::-webkit-scrollbar-thumb {
		background: #99a9bf;
		border-radius: 20px;
	  }
	}
  }
  